|
Use these to jump around or read it all...
As the Web gets bigger and bigger, the browsers become smarter and the commands get more and more complex.
After one of my previous DHTML tutorials, I received a letter from a reader who asked why I had begun writing my tutorials in a foreign language. Dont I know it, I wrote back, You only have to read it. I have to learn it well enough to be able to write about it.
Today is a good day because were staying on the easy side of things. This is just about as simple as a tutorial gets. Yet, even though the command were going to learn is easy to use, it makes such a nice effect.
I speak of TABINDEX.
The Command In Action
OK then! Lets see this pup in action. Below is a form. Youll notice that the cursor is already in the first text box. Ill tell you how I did that in a moment. Now, click the tab button on your keyboard and watch the cursor jump to the different text boxes. Banjo Newsletter Contents Index: 1990 through 1995::
214 August 1991 - JACK BAKER; Banjo Is Boring And Other Myths; Back-Up (Traditional Forms); On The Road (Tidbits); Beginner's Corner (Split-Bar Vamping);
http://www.banjonews.com/BNlhtml/indx90.htmlHOME |
Dont lie to me. You thought that was cool. I showed the effect to a couple of programming friends of mine, as well as a couple of students, and they all immediately saw the benefits. Too often you fill out forms and the elements are nicely displayed, but theyre not in order, at least not in order of how they appear in the code.
Using the TABINDEX attribute, you can force the tab to jump to the next logical form element. How cool.
Heres how I got the effect:
<FORM NAME=joe>
<INPUT TYPE=TEXT TABINDEX=1 VALUE=Number One NAME=burns>
<INPUT TYPE=TEXT TABINDEX=3 VALUE=Number Three>
<INPUT TYPE=TEXT TABINDEX=5 VALUE=Number Five>
<INPUT TYPE=TEXT TABINDEX=6 VALUE=Number Six>
<INPUT TYPE=TEXT TABINDEX=4 VALUE=Number Four>
<INPUT TYPE=TEXT TABINDEX=2 VALUE=Number Two>
</FORM>
The attribute TABINDEX is added into each of the form elements, in this case the text boxes. I then set the attributes to the numeric order I wanted the tab to follow. It works on any form element and its easy, easy, easy.
Focus onLoad
Well, we cant leave it at that. The TABINDEX is a great attribute, but this is an HTML Goodies tutorial. It has to get difficult before we can finish.
As you know, when someone logs into a page that contains a form, the cursor does not jump to a form element right away. The user has to click on the first element in order to start filling out the form. After that, the tab key does the bulk of the work. But! Wouldnt it be nice if you could force the focus to the first form element when the user logged into the page? Why, yes. Of course it would. Thats what I did above...and heres how you do it:
This goes in the BODY tag:
onLoad=self.focus();document.FORM_NAME.ELEMENT_NAME.focus()
Even if you dont know JavaScript, you can pretty much figure this one out just by reading left to right.
- onLoad means the following commands will be enacted when the page loads.
- self.focus(); indicates that the focus should be placed on something in this current page. This is a method, so the empty parentheses, (), are required. Dont forget them.
- document.FORM_NAME.ELEMENT_NAME.focus() is a hierarchy statement that forces the focus to the document, then to a specific form inside the document, and then a to specific item inside the form. That focus comes in the guise of the cursor.
To be more specific, look at the form code above. I named the form itself joe and the first form element burns. Thus, the actual line I put into the page body command looks like this:
onLoad=self.focus();document.joe.burns.focus()
Youll need to change the form and element names when you post this to your own page.
Pre-Article:Select Script
Next-Article:Margins Through Frames Tutorial | 
TABINDEX and a Couple of Other Form Tricks 
PRINT
Add to favorites